<template>
    <div>
        <div class="big-data-container">
            <div class="header"><span>运输趟数</span></div>
            <div class="chart-body">
                <div class="bottom-content-view">
                    <div class="bottom-top-title-view">
                        <div class="top-title-view-col" style="flex: 1">时间</div>
                        <div class="top-title-view-col" style="flex: 1">数量</div>
                    </div>
                    <el-scrollbar style="width: 100%;height: 420px">
                        <div class="bottom-view">
                            <div class="bottom-view-row-item" :class="index === 0 ? 'buttom-select-bg' : ''" v-for="(item,index) in list">
                                <div class="bottom-view-row-first-col">{{index + 1}}</div>
                                <div class="bottom-view-row-col" style="color: #FFFFFF;">{{item.dateStr}}</div>
                                <div class="bottom-view-row-col" style="color: #06E5AA;">{{item.cnt}}</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {boardQueryTripList} from '../../api/board'

export default {
    name: 'rightChart2',
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getData(){
            const param = {}
            boardQueryTripList(param).then(response =>{
                this.list = response.data.data
            }).catch(error => {
                console.log(error)
            })
        }
    },
    mounted () {
        this.getData()
    }
}
</script>

<style scoped lang="scss">
.big-data-container{
    width: 394px;
    height: 526px;
    background: url("/static/img/right_chart_2_bg.png") no-repeat;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    .header{
        width: 367px;
        height: 46px;
        background: url("/static/img/chart_header.png") no-repeat;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        span{
            color: #FFFFFF;
            font-size: 15px;
            margin-left: 26px;
            margin-top: 5px;
        }
    }
    .chart-body{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .bottom-content-view{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;

            .bottom-top-title-view{
                width: 342px;
                height: 34px;
                margin-top: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                background: url("/static/img/right_chart_2_top_bg.png") no-repeat;

                .top-title-view-col{
                    width: 100%;
                    color: #FFFFFF;
                    font-size: 16px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                }
            }
            /deep/ .el-scrollbar__wrap{
                overflow-x: hidden;
            }

            .bottom-view{
                width: 100%;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;

                .bottom-view-row-item{
                    width: 335px;
                    height: 25px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    background: url("/static/img/right_chart_row_bg.png") no-repeat;
                    margin-top: 5px;

                    .bottom-view-row-first-col{
                        height: 100%;
                        width: 50px;
                        font-size: 16px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        color: #F68E42;
                    }

                    .bottom-view-row-col{
                        height: 100%;
                        width: 100%;
                        color: #9AA4A6;
                        font-size: 16px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .buttom-select-bg{
                    background: url("/static/img/right_chart_row_selected_bg.png") no-repeat;
                }
            }

        }



    }
}
</style>
